<template>
  <div class="customer-service-waybill-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle" v-model:showMore="showMore" :spanCount="4"></super-search>
    </div>
    <div class="content-wrapper">
      <a-tabs v-model:activeKey="activeKey" @change="changeTabHandle">
        <a-tab-pane key="5" :tab="`入仓(${pageStat['5']})`"></a-tab-pane>
        <a-tab-pane key="6" :tab="`出库(${pageStat['6']})`"></a-tab-pane>
        <a-tab-pane key="7" :tab="`出仓(${pageStat['7']})`"></a-tab-pane>
        <a-tab-pane key="8" :tab="`运输(${pageStat['8']})`"></a-tab-pane>
        <a-tab-pane key="9" :tab="`签收(${pageStat['9']})`"></a-tab-pane>
        <a-tab-pane key="-5" :tab="`扣货(${pageStat['-5']})`"></a-tab-pane>
        <a-tab-pane key="0" :tab="`取消(${pageStat['0']})`"></a-tab-pane>
        <a-tab-pane key="-2" :tab="`全部(${pageStat['-2']})`"></a-tab-pane>
      </a-tabs>
      <super-table
        :height="tableHeight"
        ref="tableRef"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :loading="loading"
        :data="tableData"
        :total="searchForm.total"
        :column="tableColumn"
        :row-class-name="rowClassName"
        @change-page="getData"
        :activeKey="activeKey"
        :sort-config="{ remote: true, multiple: true }"
        @sort-change="sortChangeHandle"
      >
        <template #tool>
          <div style="display: flex; flex-wrap: wrap">
            <div style="margin-bottom: 5px">
              <!-- 入仓 -->
              <template v-if="activeKey === '5'">
                <a-button type="primary" @click="modifyChannelHandle" v-if="hasAuth('CUSTOMER_CHANNEL')">更改渠道</a-button>
                <a-button type="primary" @click="outOfWarehouseHandle">出库</a-button>
                <a-button type="primary" @click="makeInvoiceHandle">制作发票</a-button>
                <a-button v-debounce type="primary" @click="modifyVolumeDetailsHandle" v-if="hasAuth('CUSTOMER_VOLUME_WEIGHT')">修改材积明细</a-button>
                <a-button v-debounce type="primary" @click="updateBoxVolumeHandle" v-if="hasAuth('SYNCHRONIZE_VOLUME_DETAILS')">同步材积明细</a-button>
                <a-button v-debounce type="primary" @click="modifySettlementDuplicateHandle" v-if="hasAuth('CUSTOMER_WEIGHT')">修改结算重</a-button>
                <a-button v-debounce type="primary" @click="agentHandle" v-if="hasAuth('CUSTOMER_AGENT')">配置代理</a-button>
                <a-button v-debounce type="primary" @click="isTransferBillHandle" v-if="hasAuth('CUSTOMER_SERVICE_TRANSFER')">转运</a-button>
                <a-button type="primary" @click="addProblemShipment">发起问题件</a-button>
              </template>

              <!-- 出库 -->
              <template v-if="activeKey === '6'">
                <a-button type="primary" @click="modifyChannelHandle" v-if="hasAuth('CUSTOMER_CHANNEL')">更改渠道</a-button>
                <a-button type="primary" @click="modifyAgentChannelHandle" v-if="hasAuth('AGENT_CHANNEL')">更改代理渠道</a-button>
                <a-button type="primary" @click="returnOrderHandle" v-if="hasAuth('CUSTOMER_RETURN')">回退</a-button>
                <a-button type="primary" @click="statusHandle(2)" v-debounce>出仓</a-button>
                <a-button type="primary" @click="makeInvoiceHandle">制作发票</a-button>
                <a-button v-debounce type="primary" @click="modifyVolumeDetailsHandle" v-if="hasAuth('CUSTOMER_VOLUME_WEIGHT')">修改材积明细</a-button>
                <a-button v-debounce type="primary" @click="updateBoxVolumeHandle" v-if="hasAuth('SYNCHRONIZE_VOLUME_DETAILS')">同步材积明细</a-button>
                <a-button v-debounce type="primary" @click="modifySettlementDuplicateHandle" v-if="hasAuth('CUSTOMER_WEIGHT')">修改结算重</a-button>
                <a-button v-debounce type="primary" @click="agentHandle" v-if="hasAuth('CUSTOMER_AGENT')">配置代理</a-button>
                <a-button type="primary" @click="addProblemShipment">发起问题件</a-button>
              </template>

              <!--  出仓-->
              <template v-if="activeKey === '7'">
                <a-button type="primary" @click="modifyChannelHandle" v-if="hasAuth('CUSTOMER_CHANNEL')">更改渠道</a-button>
                <a-button type="primary" @click="modifyAgentChannelHandle" v-if="hasAuth('AGENT_CHANNEL')">更改代理渠道</a-button>
                <a-button type="primary" @click="returnOrderHandle" v-if="hasAuth('CUSTOMER_RETURN')">回退</a-button>
                <a-button type="primary" @click="statusHandle(3)" v-debounce>出运</a-button>
                <a-button type="primary" @click="makeInvoiceHandle">制作发票</a-button>
                <a-button v-debounce type="primary" @click="modifyVolumeDetailsHandle" v-if="hasAuth('CUSTOMER_VOLUME_WEIGHT')">修改材积明细</a-button>
                <a-button v-debounce type="primary" @click="modifySettlementDuplicateHandle" v-if="hasAuth('CUSTOMER_WEIGHT')">修改结算重</a-button>
                <a-button v-debounce type="primary" @click="agentHandle" v-if="hasAuth('CUSTOMER_AGENT')">配置代理</a-button>
                <a-button type="primary" @click="addProblemShipment">发起问题件</a-button>
                <a-button type="primary" @click="setTransferNumberHandle">设置转单号</a-button>
              </template>

              <!--  运输-->
              <template v-if="activeKey === '8'">
                <a-button type="primary" @click="returnOrderHandle" v-if="hasAuth('CUSTOMER_RETURN')">回退</a-button>
                <a-button type="primary" @click="statusHandle(4)" v-debounce>签收</a-button>
                <a-button v-debounce type="primary" @click="turnTurnShipmentWarehouseHandle" v-if="hasAuth('CREATE_WAREHOUSE')">创建中转单</a-button>
                <a-button type="primary" @click="addProblemShipment">发起问题件</a-button>
                <a-button type="primary" @click="setTransferNumberHandle">设置转单号</a-button>
              </template>

              <!--  签收-->
              <template v-if="activeKey === '9'">
                <a-button type="primary" @click="returnOrderHandle" v-if="hasAuth('CUSTOMER_RETURN')">回退</a-button>
                <a-button v-debounce type="primary" @click="turnTurnShipmentWarehouseHandle" v-if="hasAuth('CREATE_WAREHOUSE')">创建中转单</a-button>
                <a-button type="primary" @click="addProblemShipment">发起问题件</a-button>
              </template>

              <!--  扣货-->
              <template v-if="activeKey === '-5'">
                <a-button type="primary" @click="agentStatusSignHandle">代理状态标记</a-button>
                <a-button type="primary" @click="addProblemShipment">发起问题件</a-button>
              </template>

              <!--  取消-->
              <template v-if="activeKey === '0'">
                <a-button type="primary" @click="recoverShipmentHandle" v-if="hasAuth('RESTORE_WAYBILL')">恢复运单</a-button>
                <a-button type="primary" @click="returnOrderHandle" v-if="hasAuth('CUSTOMER_RETURN')">回退</a-button>
              </template>

              <!--  全部-->
              <template v-if="activeKey === '-2'">
                <a-button type="primary" @click="addProblemShipment">发起问题件</a-button>
              </template>

              <a-button type="primary" @click="modifyMarkHandle">标识</a-button>
              <a-button type="primary" @click="showStatictisHandle">查看统计</a-button>
              <a-button v-debounce type="primary" @click="createWorkOrderHandle">创建工单</a-button>
            </div>

            <!-- 批量操作 -->
            <div v-if="activeKey !== '0'">
              <a-dropdown :getPopupContainer="getPopupContainer">
                <a-button type="primary" class="ant-dropdown-link" @click.prevent> 批量操作 <DownOutlined /></a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="modifyRemarkHandle">批量修改客户备注</a-menu-item>
                    <a-menu-item @click="modifyInnerRemarkHandle">批量修改内部备注</a-menu-item>
                    <a-menu-item @click="modifyCustomerRemarkHandle">批量修改客服备注</a-menu-item>
                    <a-menu-item @click="transferNumberHandle" v-if="['7', '8', '-2'].includes(activeKey)">批量修改转单号</a-menu-item>
                    <a-menu-item @click="addRouteInfoHandle">批量添加轨迹</a-menu-item>
                    <a-menu-item @click="importRouteInfoHandle">批量导入轨迹</a-menu-item>
                    <a-menu-item @click="importBoxTransferNoHandle">批量上传子转单号</a-menu-item>
                    <a-menu-item @click="batchUploadFileHandle">批量上传附件</a-menu-item>
                    <!-- <a-menu-item @click="importProblemHandle">导入问题件</a-menu-item> -->
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
            <!-- 导出 -->
            <div>
              <a-dropdown :getPopupContainer="getPopupContainer">
                <a-button type="primary" class="ant-dropdown-link" @click.prevent> 导出 <DownOutlined /></a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="templateExportHandle">使用模版导出</a-menu-item>
                    <a-menu-item @click="customExportHandle">自定义导出</a-menu-item>
                    <a-menu-item @click="invoiceExportHandle">发票导出</a-menu-item>
                    <a-menu-item @click="VolumeExportHandle">材积明细导出</a-menu-item>
                    <a-menu-item @click="passShipmentQuotationExcelHandle">导出报价</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
            <!-- 推送下单 -->
            <div v-if="['5', '6', '7', '-2'].includes(activeKey)">
              <a-dropdown :getPopupContainer="getPopupContainer">
                <a-button type="primary" class="ant-dropdown-link" @click.prevent> 推送下单 <DownOutlined /></a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="createShipmentHandle">创建运单</a-menu-item>
                    <a-menu-item @click="pushCustomerDataHandle">推送拣货数据</a-menu-item>
                    <a-menu-item @click="cancelShipmentHandle">取消运单</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
            <!-- 打印标签、下载标签 -->
            <div v-if="['5', '6', '7'].includes(activeKey)">
              <a-dropdown :getPopupContainer="getPopupContainer">
                <a-button type="primary" class="ant-dropdown-link" @click.prevent> 标签管理 <DownOutlined /></a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="printLabelHandle">打印标签</a-menu-item>
                    <a-menu-item @click="downloadLabelHandle(undefined)">下载标签</a-menu-item>
                    <a-menu-item @click="downloadLabelHandle(1)">合并下载</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
            <!-- 报关管理 -->
            <div v-if="['5', '6', '7'].includes(activeKey)" v-btnAuth="'CUSTOMERSERVICEWAYBILL_CUSTOMS_CLEARANCE'">
              <a-dropdown :getPopupContainer="getPopupContainer">
                <a-button type="primary" class="ant-dropdown-link" @click.prevent> 报关管理 <DownOutlined /></a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="customsClearanceHandle">合并报关</a-menu-item>
                    <a-menu-item @click="cancelMergeDeclarationHandle">取消报关</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
            <!-- 运踪屏蔽 -->
            <div v-if="activeKey !== '-2'">
              <a-dropdown :getPopupContainer="getPopupContainer">
                <a-button type="primary" class="ant-dropdown-link" @click.prevent> 运踪屏蔽 <DownOutlined /></a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="trackInfoHideHandle(1)">运踪屏蔽</a-menu-item>
                    <a-menu-item @click="trackInfoHideHandle(0)">取消屏蔽</a-menu-item>

                    <a-menu-item @click="updateTrackHandle">更新运踪</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
          </div>
        </template>

        <template #waybillNum="{ row }">
          <div class="shipmentNumberSize" :title="row.tag">
            <a-button type="link" @click="showHandle(row)">{{ row.waybillNum }} </a-button>
            <span class="redColor"> {{ row.tag }}</span>
          </div>
        </template>

        <template #customsDeclarationType="{ row }">
          {{ getLabelByDict("CUSTOMS_DECLARATION_METHOD", row.customsDeclarationType) }}
        </template>

        <template #transferOrderNumber="{ row }">
          <span :class="[row.transferOrderNumber === '待上传' ? 'redColor' : '']"> {{ row.transferOrderNumber }}</span>
        </template>

        <template #pushOrderSuccess="{ row }">
          <span v-if="row.pushOrderSuccess === 1">是</span>
          <span v-if="row.pushOrderSuccess === 0">否</span>
        </template>

        <template #trackState="{ row }">
          <span v-if="row.trackState === 0" style="color: #67c23a">正常</span>
          <span v-if="row.trackState === 1" style="color: red">屏蔽</span>
        </template>
        <template #addressType="{ row }">
          <a-tag v-if="row.addressType === 'AMAZON'" color="#108ee9">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
          <a-tag v-if="row.addressType === 'WALMART'" color="#2db7f5">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
          <a-tag v-if="row.addressType === 'PERSONALWAR'" color="#f50">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
        </template>
        <template #makeInvoiceStatus="{ row }">
          <a-tag v-if="row.makeInvoiceStatus === -1" color="#f50">未做发票 </a-tag>
          <a-tag v-if="row.makeInvoiceStatus === -2" color="#87d068"> 已做发票 </a-tag>
        </template>
        <template #status="{ row }">
          <a-tag v-if="row.status === 1" color="#009688"> 已下单 </a-tag>
          <a-tag v-if="row.status === 5" color="#CD5C5C"> 已入仓 </a-tag>
          <a-tag v-if="row.status === 6" color="#FFE4E1"> 出库 </a-tag>
          <a-tag v-if="row.status === 7" color="#2db7f5"> 出仓 </a-tag>
          <a-tag v-if="row.status === 8" color="#108ee9"> 运输中 </a-tag>
          <a-tag v-if="row.status === 9" color="#87d068"> 签收 </a-tag>
          <a-tag v-if="row.status === -5" color="#f50"> 扣货 </a-tag>
          <a-tag v-if="row.status === 0" color="#9AFF9A"> 已取消 </a-tag>
        </template>
        <template #action="{ row }">
          <a-button type="link" @click="showLogHandle(row)">日志</a-button>
        </template>
      </super-table>
    </div>
    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :closable="true" @close="drawerOpts.visible = false" :width="drawerOpts.width" placement="right">
      <component
        v-model:visible="drawerOpts.visible"
        :activeKey="activeKey"
        :is="drawerOpts.component"
        :type="drawerOpts.type"
        :pass-data="drawerOpts.passData"
        @submit="drawerOpts.visible = false"
        :requestFn="requestFn"
      ></component>
    </a-drawer>
    <!-- 弹窗 -->
    <a-modal
      v-model:visible="dialogOpts.visible"
      :maskClosable="false"
      :keyboard="false"
      :closable="['DataStatistics'].includes(dialogOpts.component)"
      :footer="null"
      :title="dialogOpts.title"
      :width="dialogOpts.width"
    >
      <component
        v-model:visible="dialogOpts.visible"
        :init="getStatisticsDataFn"
        :column="statisticsColumn"
        :is="dialogOpts.component"
        :type="dialogOpts.type"
        :pass-data="dialogOpts.passData"
        @submit="dialogSubmitHandle"
        :active-key="activeKey"
        :uploadRequest="upLoadRequestFn"
        :downloadType="upLoadTemplate"
      ></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import AgentStatusSign from "@/views/waybillManagement/financeWaybill/waybillList/components/agentStatusSign/index.vue";
import Details from "./components/details/index.vue";
import ModifyChannel from "./components/modifyChannel/index.vue";
import ModifyProductName from "./components/modifyProductName/index.vue";
import ModifyMasterial from "./components/modifyMasterial/index.vue";
import ModifyRemark from "./components/modifyRemark/index.vue";
import TransferNumber from "./components/transferNumber/index.vue";
import SetTransferNumber from "./components/setTransferNumber/index.vue";
import RouteInfo from "./components/routeInfo/index.vue";
import ImportRouteInfo from "./components/importRouteInfo/index.vue";
import Mark from "./components/mark/index.vue";
import OutOfWarehouse from "./components/outOfWarehouse/index.vue";
import ReturnOrder from "./components/returnOrder/index.vue";
import DataStatistics from "@/components/dataStatistics/index.vue";
import MakeInvoice from "../stockManagement/components/makeInvoice/index.vue";
import TemplateExport from "./components/templateExport/index.vue";
import CustomExport from "./components/customExport/index.vue";
import ModifyAgentChannel from "./components/modifyAgentChannel/index.vue";
import OperationLog from "@/components/operationLog/index.vue";
import InvoiceExport from "@/views/waybillManagement/businessWaybill/waybillList/components/InvoiceExport/index.vue";
import ModifyVolumeDetails from "./components/modifyVolumeDetails/index.vue";
import ModifySettlementDuplicate from "./components/modifySettlementDuplicate/index.vue";
import ImportBoxTransferNo from "./components/importBoxTransferNo/index.vue";
import CreateWorkOrder from "./components/createWorkOrder/index.vue";
import isTransferBill from "./components/isTransferBill/index.vue";
import ModifyCustomerRemark from "./components/modifyCustomerRemark/index.vue";
import BatchUploadFile from "./components/batchUploadFile/index.vue";
import ProblemShipment from "./components/problemShipment/index.vue";
import UploadfileAndDownLoadTemplate from "@/components/uploadfileAndDownLoadTemplate/index.vue";
import ShowModalHook from "./composables/showModalHook";
import BatchHook from "./composables/batchHook";
import ExportHook from "./composables/exportHook";
import PushOrderHook from "./composables/pushOrderHook";
import LabelHook from "./composables/labelHook";
import CustomsClearanceHook from "./composables/customsClearanceHook";
import TrackInfoHook from "./composables/trackInfoHook";
import UploadFileHook from "./composables/uploadFileHook";
export default {
  name: "CustomerServiceWaybill",
  components: {
    Details,
    ModifyChannel,
    ModifyProductName,
    ModifyMasterial,
    ModifyRemark,
    Mark,
    TransferNumber,
    SetTransferNumber,
    RouteInfo,
    ImportRouteInfo,
    ReturnOrder,
    OutOfWarehouse,
    DataStatistics,
    MakeInvoice,
    TemplateExport,
    CustomExport,
    ModifyAgentChannel,
    OperationLog,
    InvoiceExport,
    AgentStatusSign,
    ModifyVolumeDetails,
    ModifySettlementDuplicate,
    CreateWorkOrder,
    ImportBoxTransferNo,
    isTransferBill,
    ModifyCustomerRemark,
    BatchUploadFile,
    ProblemShipment,
    UploadfileAndDownLoadTemplate
  }
};
</script>
<script lang="ts" setup>
import ModalHook from "@/hook/modalHook";
import TableHeightHook from "@/hook/tableHeightHook";
import { searchItemList, statisticsColumn } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { DownOutlined } from "@ant-design/icons-vue";
import CommonHook from "@/hook/commonHook";
import TableHook from "@/hook/tableHook";
import AuthHook from "@/hook/authHook";

const { tableHeight, loading, showMore } = TableHeightHook(110);
const { hasAuth } = AuthHook();
const { getLabelByDict } = CommonHook();
const { activeKey, pageStat, searchForm, tableData, tableRef, dialogOpts, drawerOpts, saPageInfo, getPopupContainer, tableColumn, rowClassName, upLoadTemplate } = InitHook();
const { dialogSubmitHandle } = ModalHook({
  drawerOpts,
  dialogOpts,
  callBack: () => searchHandle()
});

//上传文件
const { upLoadType, upLoadRequestFn } = UploadFileHook();
const { searchHandle, getData, changeTabHandle, statusHandle, outOfWarehouseHandle, getStatisticsDataFn, requestFn, turnTurnShipmentWarehouseHandle, recoverShipmentHandle, getParams } = OperationHook(
  {
    searchForm,
    tableData,
    tableRef,
    dialogOpts,
    drawerOpts,
    saPageInfo,
    loading,
    activeKey,
    pageStat
  }
);
const { sortChangeHandle } = TableHook({ searchForm }, getData);

//弹窗
const {
  showHandle,
  modifyChannelHandle,
  // modifyMasterialHandle,
  // modifyProductNameHandle,
  modifyMarkHandle,
  transferNumberHandle,
  setTransferNumberHandle,
  returnOrderHandle,
  showStatictisHandle,
  makeInvoiceHandle,
  modifyAgentChannelHandle,
  showLogHandle,
  agentStatusSignHandle,
  modifyVolumeDetailsHandle,
  modifySettlementDuplicateHandle,
  agentHandle,
  createWorkOrderHandle,
  isTransferBillHandle,
  updateBoxVolumeHandle,
  addProblemShipment
  // importProblemHandle
} = ShowModalHook({ dialogOpts, drawerOpts, tableRef, upLoadType, upLoadTemplate });

//批量操作
const { modifyRemarkHandle, modifyInnerRemarkHandle, addRouteInfoHandle, importRouteInfoHandle, importBoxTransferNoHandle, modifyCustomerRemarkHandle, batchUploadFileHandle } = BatchHook({
  dialogOpts,
  tableRef
});

//导出
const { templateExportHandle, customExportHandle, invoiceExportHandle, VolumeExportHandle, passShipmentQuotationExcelHandle } = ExportHook({
  dialogOpts,
  tableRef,
  activeKey,
  getParams,
  loading,
  searchHandle
});

//推单
const { cancelShipmentHandle, createShipmentHandle, pushCustomerDataHandle } = PushOrderHook({ tableRef, activeKey, searchHandle });

//标签管理
const { printLabelHandle, downloadLabelHandle } = LabelHook({ loading, tableRef });

//报关管理
const { customsClearanceHandle, cancelMergeDeclarationHandle } = CustomsClearanceHook({ searchHandle, loading, tableRef });

//运踪屏蔽
const { trackInfoHideHandle, updateTrackHandle } = TrackInfoHook({ searchHandle, tableRef, getData });

searchHandle();
</script>
<style lang="stylus" scoped>
.customer-service-waybill-page{
  :deep(){
    .vxe-body--row.red-row {
      background-color: #fef0f0;
      color: #f56c6c;
    }

   .vxe-body--row.yellow-row {
    background-color: #fdf6ec;
    color: #e6a23c;
    }


    .vxe-body--row.orange-row {
    background-color: #d3d3d3;
    color: red;
    }
  }
  .shipmentNumberSize{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .redColor{
    color:red
    font-size:12px
    font-weight:600
  }
}
</style>
